iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
2
Mobile Development

iOS Developer Learning Flutter系列 第 6

iOS Developer Learning Flutter. Lesson5 容器元件

  • 分享至 

  • xImage
  •  

昨天我們講了佈局元件(對岸的朋友是翻成組件, 我自己是習慣講元件)
今天我們來講講類似的概念:容器元件
我個人的理解:這兩種Widget都是為了子Widget而生的
只是佈局類是為了排版(通常都是繼承自MultiChildRenderObjectWidget)
而容器類是為了修飾(像今天的內容除了Container, 都是繼承自SingleChildRenderObjectWidget)

1. Align

(其實根據定義, Align應該比較像是佈局類才對... 不管了XD)
昨天提到重疊時可以用Stack
另外還有Align也可以派上用場
最大差別在於Stack可以有多個子widget

除了alignment屬性以外
Align還有widthFactor/heightFactor
可以根據child的大小決定Align的大小
如果factor是null, 就會盡量放大空間

而Center Widget是Align Widget的一個特例
代表alignment屬性就是center

2. Padding

這應該是最單純的Widget了
就是透過EdgeInsets留邊距
EdgeInsets可以用.all一次全部指定四邊間距
也可以用.symmetric指定一組對稱間距

3. DecoratedBox

這個就是我覺得Flutter相較以前有點麻煩的地方⚠️⚠️⚠️
以前所有的View都是UIView
都有backgroundColor可以用
但現在Widget是沒有backgroundColor的
要給它底色的話
就必須再包一層DecoratedBox或等等會提到的Container
(而且就我所知, Flutter沒有視覺化工具⚠️⚠️⚠️, 所以滿常需要上色來輔助debug)

DecoratedBox有兩個屬性
position決定作用在前景或後景
decoration的話就直接給BoxDecoration(倒裝句?)
BoxDecoration可以實現一些以前要在UIView.layer才能做的事
比較常見的有陰影/邊線/圓角
但是圓角要注意!⚠️⚠️⚠️
如果00000000000000000000是我們要裝飾的widget
因為DecoratedBox是加一層東西在子widget的前面或後面
所以會變成這樣(foreground)

或這樣(background)

解決方式是
把我們真的要做圓角的widget用ClipRRect包起來

4. 尺寸類容器

4.1 ConstrainedBox

看到constraint有沒有很興奮啊?XD
這個Widget可以透過BoxConstraints限制child的minWidth, maxWidth, minHeight, maxHeight

4.2 SizedBox

就是ConstrainedBox的一個特例(min = max)
固定大小的意思

4.3 多重限制

  1. 如果ConstrainedBox後沒有效果, 基本上就是父widget已經有限制了
  2. UnconstrainedBox可以用來去除父widget的限制(子widget不會被拉伸, 但還是會留白)

4.4 其他尺寸類

  1. AspectRatio設定長寬比
  2. FractionallySizedBox根據父widget的寬高來設定大小比例

5. Container(繼承自StatelessWidget)

Container就是Flutter裡的要你命三千瑞士刀
它提供了很多前面我們所提到的功能
其實它本身並不是一個RenderObject
而是一個便利的組合型widget
其中的margin和padding屬性很容易搞混(就是我)
marging是指Container跟外面的距離
padding是指Container跟內部的距離

參考連結


下集預告:文字與輸入


上一篇
iOS Developer Learning Flutter. Lesson4 畫面佈局
下一篇
iOS Developer Learning Flutter. Lesson6 文字顯示與輸入
系列文
iOS Developer Learning Flutter30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言